@import '../../../them.scss';

.scroll-view {
    display: flex;
    flex-direction: row;
    align-items: center;
    white-space: nowrap;

    .list-view {
        display: flex;
        flex-direction: row;
        align-items: center;

        .app-detail-view {
            display: flex;
            flex-direction: column;
            width: 600rpx;
            min-height: 1200rpx;
            padding: 20rpx 0rpx;
            border-radius: 10rpx;
            margin: 0 10rpx;
            .today-img-view {
                width:580rpx;
                height: 1200rpx;
                border-radius: 10rpx;
            }
        }

        .new-app-view {
            display: flex;
            flex-direction: column;
            width: 600rpx;
            background-color: $lightGray;
            min-height: 400rpx;
            padding: 20rpx 0rpx;
            border-radius: 12rpx;
            margin: 0 12rpx;
            // border: 1px solid $L1;; 
            /* 元素的实际边框 */
            box-shadow: 0rpx 0rpx 10rpx 5rpx $L1;

            .top-info-bg {
                width: 80%;
                margin: 0 auto;
                display: flex;
                padding-top: 20rpx;
                align-items: center;
            }

            .top-right-view {
                margin-left: 20rpx;
                width: 60%;

                .app-name {
                    font-size: 40rpx;
                    // white-space:break-spaces;
                    color: $regularTextColor;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .app-size {
                    margin-top: 20rpx;
                    font-size: 32rpx;
                    color: $secondTextColor;
                }
            }

            .bottom-bg-view {
                display: flex;
                margin: 0 auto;
                width: 80%;
                flex-direction: row;
                align-items: center;
                margin-top: 150rpx;

                .left-bg-view {
                    display: flex;
                    width: 80%;
                    align-items: center;
                    flex-direction: row;

                    .left-name {
                        margin-left: 10rpx;
                        font-size: 28rpx;
                        color: $secondTextColor;
                    }
                }

                .right-bg-view {
                    display: flex;
                    width: 20%;

                }

                .img {
                    width: 70rpx;
                    height: 70rpx;
                    border-radius: 50%;
                }
            }

            .img {
                width: 140rpx;
                height: 140rpx;
                border-radius: 20rpx;
            }
        }
        .search-view {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 160rpx;
            min-height: 160rpx;
            border-radius: 12rpx;
            margin: 0 20rpx;

            .today-img-view {
                width: 140rpx;
                height: 140rpx;
                border-radius: 20rpx;
            }
            .search-appname-text {
                font-size: 32rpx;
                margin-top: 20rpx;
                color: $regularTextColor;
            }

        }

        .cell-view {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 240rpx;
            min-height: 240rpx;
            padding: 20rpx 0rpx;
            border-radius: 12rpx;
            margin: 0 8rpx;

            .img {
                width: 200rpx;
                height: 200rpx;
                border-radius: 20rpx;
            }

            .text {
                margin-top: 20rpx;
                font-size: 32rpx;
                font-weight: 400;
                width: 240rpx;
                text-align: center;
                // white-space:break-spaces;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .star-view {
                display: flex;
                flex-direction: row;
                align-items: center;
            }

            .down-btn-view {
                margin-top: 20rpx;
            }

            .star-text {
                font-size: 30rpx;
                margin-left: 6rpx;
                color: $mainColor;
            }

            .btn {
                background-color: $mainColor;
            }

            .today-img-view {
                width: 100rpx;
                height: 100rpx;
                border-radius: 20rpx;
            }

            .today-appname-text {
                width: 240rpx;
                text-align: center;
                word-wrap: break-word;
                font-size: 32rpx;
                margin-top: 20rpx;
                color: $L1;
                font-weight: bold;
                // white-space: pre-wrap;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .today-text {
                color: $L1;
                margin-top: 40rpx;
                font-weight: bold;
                font-size: 30rpx;
            }

            .search-appname-text {
                font-size: 32rpx;
                margin-top: 20rpx;
                color: $regularTextColor;
                font-weight: bold;
            }

        }
       
    }

}